<template>
  <view class="content">
    <view>
      <image src="https://sanshengcai.com/home/images/homeTop.jpg" style="width: 100%; height: 460rpx;" mode="aspectFill"></image>
    </view>
    <view class="container">
      <view v-for="(item, index) in tabList" :key="index" class="item2" @click="goInfo2(item)">
        <view class="icon" :style="{ backgroundColor: item.color }">
          <u-icon :name="item.icon" size="60rpx" color="#fff"></u-icon>
        </view>
        <view class="title">{{ item.title }}</view>
      </view>
    </view>
    <view style="margin: 20rpx 0;">
      <view style="display: flex; align-items: center; background-color: #fff; padding: 0 20rpx;">
        <u-icon name="bell-fill" size="50rpx" color="#2295ff"></u-icon>
        <text style="font-style: italic;">社区</text>
        <text style="color: #2295ff; font-style: italic; font-weight: 600;">公告</text>
        <u-notice-bar
          fontSize="32rpx"
          direction="column"
          :text="noticeText"
          style="margin: 0 20rpx; font-weight: 600;"
          bgColor="transparent"
          :icon="null"
          color="#909399"
          @click="noticeClick"
        ></u-notice-bar>
      </view>
    </view>
    <u-tabs :list="tabsList" :current="avtiveTab" @click="changeTab"></u-tabs>
    <!-- 列表项 -->
    <view v-for="(item, index) in list" :key="index">
      <view class="item" @click="goInfo(item)">
        <image v-if="1 == item.isTop" class="top" src="https://sanshengcai.com/home/images/top.png"></image>
        <image class="item-img" :src="handleUrl(item)" mode="aspectFill"></image>
        <view class="item-desc">
          <view class="u-line-2 item-desc-title">{{ item.title }}</view>
          <view class="u-line-1 item-desc-unit">{{ item.unitName }}阿拉善你发看来你是发啦沙娜拉困哪深蓝看手法</view>
          <view class="item-desc-foot">
            <view>
              {{ $u.timeFrom(Date.parse(item.updateTime), 'yyyy年mm月dd日') }}
            </view>
            <view style="display: flex; align-items: center;">
              <u-icon name="eye" size="22rpx"></u-icon>
              <view style="margin-left: 10rpx;">{{ item.viewCount }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <u-loadmore v-if="list.length === 0" status="nomore" nomoreText="暂无数据" />
    <u-loadmore v-if="refreshing" status="loading" loading-text="加载中..." />
    <u-loadmore v-if="finished" status="nomore" nomoreText="我是有底线的" />
  </view>
</template>

<script>
import { mapActions, mapMutations } from 'vuex'
import api from '../../request/api/community'
import config from '../../request/config'
export default {
  data() {
    return {
      // 公告列表
      noticeList: [],
      // 公告滚动列表
      noticeText: [],
      avtiveTab: 0,
      tabsList: [{ name: '资讯' }, { name: '活动' }],
      tabList: [
        { title: '美食美物', url: '/food/list', icon: 'thumb-up-fill', color: '#fa7c18' },
        { title: '房屋租赁', url: '/house/list', icon: 'map-fill', color: '#ff84af' },
        // { title: '招聘信息', url: '/recruitment/list', icon: 'account-fill', color: '#2295ff' },
        { title: '法律资讯', url: '/lawyer/list', icon: 'file-text-fill', color: '#ff4e44' }
      ],
      list: [],
      params: {
        pageNum: 1,
        pageSize: 5,
        type: 7
      },
      finished: false, // 是否已加载全部数据
      refreshing: false, // 是否正在刷新
      total: 0
    }
  },
  async onLoad() {
    await this.getNoticeList()
    await this.getList()
  },
  // 触底加载
  onReachBottom() {
    if (this.list.length < this.total) {
      this.getList()
    }
  },
  methods: {
    ...mapMutations('userInfo', ['SET_TOKEN']),
    ...mapActions('userInfo', ['wxLogin']),
    async changeTab({ index }) {
      this.avtiveTab = index
      this.params.pageNum = 1
      this.list = []
      this.getList()
    },
    /**
     * 跳转公告详情
     * @param {number} index 索引
     */
    noticeClick(index) {
      uni.navigateTo({
        url: `/bulletin/detail?id=${this.noticeList[index].postId}`
      })
    },
    // 获取公告列表
    async getNoticeList() {
      var { rows } = await api.getList({
        pageNum: 1,
        pageSize: 99,
        type: 5,
        status: 1
      })
      this.noticeText = rows.map(item => item.title)
      this.noticeList = rows
    },
    async getList() {
      this.refreshing = true
      // 0资讯, 1活动
      this.params.communityType = this.avtiveTab
      try {
        var { rows, total } = await api.getList(this.params)
      } catch (error) {
        return
      } finally {
        this.refreshing = false
      }
      this.list = [...this.list, ...rows]
      this.total = total
      if (this.list.length >= this.total) {
        this.finished = true
      } else {
        this.params.pageNum++
      }
    },
    handleUrl({ images }) {
      return images.split(",")[0] ? config.baseUrl + images.split(",")[0] : ''
    },
    goInfo(item) {
      uni.navigateTo({
        url: `/information/detail?id=${item.postId}`
      });
    },
    goInfo2(item) {
      uni.navigateTo({
        url: item.url
      });
    },
    async scrolltolower() {
      if (this.finished || this.refreshing) return
      try {
        this.refreshing = true
        this.params.pageNum++
        const rows = await this.getList(1)
        this.list.push(...rows)
        if (this.list.length >= this.total) this.finished = true
      } catch (err) {
        this.params.pageNum--
      } finally {
        this.refreshing = false
      }
    },
    getNavSize() {
      // 获取状态栏高度
      const { statusBarHeight: statusHeight, windowWidth } = uni.getSystemInfoSync();

      // 获取胶囊按钮信息
      const menu = uni.getMenuButtonBoundingClientRect();
      const menuButtonHeight = menu.height;
      const menuButtonTop = menu.top;

      // 计算导航栏高度（单位：rpx）
      const scaleFactor = 750 / windowWidth;
      const navHeight = (
        statusHeight +
        menuButtonHeight +
        (menuButtonTop - statusHeight) * 2 // 胶囊上下边距
      ) * scaleFactor;
      return navHeight
    }
  },
  onShareAppMessage() {
    return {
      title: '双沟社区',
      path: '/pages/index/index', // 分享路径
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f8f9fa;
}
</style>

<style scoped lang="scss">
.content {
}

.item {
  display: flex;
  align-items: center;
  margin: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  position: relative;
  
  .item-img {
    flex-shrink: 0;
    width: 260rpx;
    height: 170rpx;
    border-radius: 10rpx;
  }
  .top {
    position: absolute;
    right: -2rpx;
    top: -2rpx;
    width: 80rpx;
    height: 80rpx;
  }
  .item-desc {
    padding-left: 20rpx;
    .item-desc-title {
      padding-right: 26rpx;
      font-size: 26rpx;
      color: #909399;
      margin-bottom: 15rpx;
    }

    .item-desc-unit {
      color: #909399;
      font-size: 22rpx;
      margin-bottom: 15rpx;
    }

    .item-desc-foot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #909399;
      font-size: 22rpx;
    }

    .item-desc-price {
      color: #cc463d;
      font-size: 24rpx;
      font-weight: bold;
    }
  }
}

.container {
  display: flex;
  justify-content: space-evenly;
  margin-top: 20rpx;

  .item2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-items: center;
  }

  .icon {
    width: 90rpx;
    height: 90rpx;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20rpx;
  }

  .title {
    margin-bottom: 10rpx;
    font-size: 24rpx;
  }

  .desc {
    color: #666;
    font-size: 20rpx;
  }
}
</style>
